<template>
  <div class="borderBox">
    <el-row>
      <el-col :span="18" :offset="3">
        <el-table :data="datas" style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="属性名称"></el-table-column>
          <el-table-column prop="desc" label="描述"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" :offset="3">
        <el-card class="box-card">
          <div slot="header" class="card-header">dve-chart-bar</div>
          <dve-chart-bar
            width="100%"
            height="300px"
            tooltip-visible="true"
            legend-visible="true"
            dimension="date"
            metrics="ModuleB,ModuleA,CTR"
            :events="testEvents"
            :before-config="beforeConfig"
            :after-set-option="afterSetOption"
            :after-set-option-once="afterSetOptionOnce"
            :chartData="chartData"
            yAxisType="time"
            xAxisTypeTop="percent"
            xAxisTypeBottom="KMB"
            xAxisNameTop="点击率"
            xAxisNameBottom="访问量"
            axisSiteTop="CTR"
            minTop="dataMin"
            minBottom="0"
            maxTop="dataMax"
            maxBottom="dataMax"
            digit="2"
            :legendName="legendName"
            :labelMap="labelMap"
            :stack="stack"
            activeTimeGap="3000"
          ></dve-chart-bar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [
        {
          name: "chartData",
          desc: "图表数据",
          type: "Object",
          remark: "{cloumns:[],rows:[]}"
        },
        {
          name: "xAxisType",
          desc: "x轴数据类型",
          type: "String",
          remark: "category, value, time, log"
        },
        {
          name: "yAxisTypeTop",
          desc: "左侧y轴数据类型",
          type: "String",
          remark: "KMB, normal, percent"
        },
        {
          name: "yAxisTypeBottom",
          desc: "右侧y轴数据类型",
          type: "String",
          remark: "KMB, normal, percent"
        },
        {
          name: "yAxisNameTop",
          desc: "左侧Y轴名称",
          type: "String",
          remark: ""
        },
        {
          name: "yAxisNameBottom",
          desc: "右侧Y轴名称",
          type: "String",
          remark: ""
        },
        {
          name: "axisSiteTop",
          desc: "顶侧轴的指标名称",
          type: "String",
          remark: ""
        },

        {
          name: "minTop",
          desc: "左轴最小值",
          type: "String",
          remark: "默认0,数字或dataMin"
        },
        {
          name: "minBottom",
          desc: "右轴最小值",
          type: "String",
          remark: "默认0,数字或dataMin"
        },
        {
          name: "maxTop",
          desc: "左轴最大值",
          type: "String",
          remark: "默认dataMax,数字或dataMax"
        },
        {
          name: "maxBottom",
          desc: "右轴最大值",
          type: "String",
          remark: "默认dataMax,数字或dataMax"
        },
        {
          name: "digit",
          desc: "percent数据类型的小数位",
          type: "String",
          remark: "默认2"
        },
        {
          name: "legendName",
          desc: "图例别名",
          type: "Object",
          remark: "{字段名称:'别名'}"
        },
        {
          name: "labelMap",
          desc: "指标别名",
          type: "Object",
          remark: "{字段名称:'别名'}"
        },
        {
          name: "stack",
          desc: "堆叠配置",
          type: "Object",
          remark: "{组名:['指标1','指标2']}"
        },
        {
          name: "dataOrder",
          desc: "排序",
          type: "Object",
          remark: "{label: '字段', order: 'asc|desc'}"
        },
        {
          name: "label",
          desc: "图形上的文本标签",
          type: "Object",
          remark: "参考echarts"
        },
        {
          name: "itemStyle",
          desc: "图形样式",
          type: "Object",
          remark: "参考echarts"
        },
        {
          name: "showLine",
          desc: "展示为折线图的指标",
          type: "String",
          remark: "多个逗号分隔"
        },
        {
          name: "opacity",
          desc: "透明度",
          type: "String",
          remark: "默认0"
        }
      ],
      chartData: {
        columns: ["date", "ModuleB", "CTR", "ModuleA"],
        rows: [
          { date: "2020-05-01", ModuleB: 1393, ModuleA: 1000, CTR: 0.7 },
          { date: "2020-05-02", ModuleB: 3530, ModuleA: 3000, CTR: 0.2 },
          { date: "2020-05-03", ModuleB: 2923, ModuleA: 2000, CTR: 0.451211 },
          { date: "2020-05-04", ModuleB: 1723, ModuleA: 1000, CTR: 0.5 },
          { date: "2020-05-05", ModuleB: 3792, ModuleA: 700, CTR: 0.2 },
          { date: "2020-05-06", ModuleB: 4593, ModuleA: 4000, CTR: 0.8 }
        ]
      },
      testEvents: {
        click: e => {
          console.log(e);
        }
      },
      legendName: { ModuleB: "B模块", CTR: "点击率", ModuleA: "A模块" },
      labelMap: {
        date: "日期",
        ModuleB: "B模块",
        CTR: "点击率",
        ModuleA: "A模块"
      },
      stack: {
        访问量: ["ModuleB", "ModuleA"]
      }
    };
  },
  methods: {
    beforeConfig() {
      console.log("beforeConfig");
    },
    afterSetOption() {
      console.log("afterSetOption");
    },
    afterSetOptionOnce() {
      console.log("afterSetOptionOnce");
    }
  }
};
</script>

<style >
.borderBox {
  height: 100%;
}
.box-card {
  background-color: #333;
}
.el-card__body {
  background-color: #333;
  text-align: center;
}
.el-col {
  height: 100%;
}
.card-header {
  color: #fff;
  text-align: left;
}
.el-card__header {
  border-bottom: 1px solid #444 !important;
  background-color: #333 !important;
}
</style>